<template>
  <div class="container flex-box">
    <div class="main-container flex-item" style="margin-right: 180px; width: calc(100% - 220px)">
      <div class="search-form">
        <div class="search-form__common">
          <!-- 常规搜索 -->
          <transition name="el-zoom-in-top">
            <div v-show="!searchAdvancedVisable">
              <div>
                <el-input style="width:250px" size="small" clearable v-model="searchForm.keywords" placeholder="输入关键词查询">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-button type="blue" size="small" class="ml-20" @click="doSearch">搜索</el-button>
                <el-button type="normal" size="small" @click="searchAdvancedVisable=true" icon="icon icon-arr-down">
                  高级搜索
                </el-button>
                <el-button type="green" size="small" @click="dialogAddCandidateVisable=true" icon="icon el-icon-plus white">
                  发布新岗位</el-button>
                <div class="ml-20" style="display:inline-block">
                  <label>维度</label>
                  <el-radio-group v-model="dimension" size="small">
                    <el-radio-button label="1">
                      <i class="icon icon-manage"></i>  候选人
                    </el-radio-button>
                    <el-radio-button label="2">
                      <i class="icon icon-post"></i>  岗位
                    </el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </transition>
          <!-- 高级搜索 -->
          <transition name="el-zoom-in-top">
            <div v-show="searchAdvancedVisable">
              <div class="search-top-bar">
                <div class="mini-title"  style="display:inline-block">
                  高级搜索模式
                </div>
                <div class="search-block">
                  <ui-button @click="searchAdvancedVisable=false" icon="icon icon-arr-up">返回常规搜索</ui-button>
                  <ui-button @click="doSetting('search')">配置搜索条件</ui-button>
                  <ui-button>保存搜索条件</ui-button>
                </div>
              </div>
              <!-- <m-searchAdvanced></m-searchAdvanced> -->
            </div> 
          </transition>
        </div>
        <div class="process clearfix">
          <div class="f-left">  
            <div class="m-title">
              招聘需求及进度总览
            </div>
            <div class="process-check-box">
              <div class="item" :class="{ active: processActive == 1}" @click="processActive=1">当前</div>
              <div class="item" :class="{ active: processActive == 2}" @click="processActive=2">历史</div>
            </div>
          </div>
          <div class="f-right">
            <ui-button icon="icon icon-export" size="small">导出</ui-button>
          </div>
        </div>
         <!-- 设置按钮 -->
        <div class="table-setting" @click="doSetting('other')">
          <i class="icon icon-setting"></i>
        </div>
      </div>
      <div class="layout-table">
        <m-dataTable ref="dataTable"></m-dataTable>
      </div>
    </div>
    <div class="right-side" style="width:160px" :class="{'is-fixed': isFixed}">
      <div class="oven-box">
        <div class="oven-button" @click="onOven">
          <div class="btn">一支穿云箭</div>
          <div class="circle">
            <i class="icon icon-rocket" :class="{active: rocketActive}"></i>
          </div>
        </div>
        <div class="oven-button"  @click="doSetting('oven')">
          <div class="btn">自定义筛选</div>
          <div class="circle">
            <i class="icon icon-chart"></i>
          </div>
        </div>
      </div>
      <!-- 返回顶部 -->
      <div class="back-top" @click="backTop" style="right: 142px; margin-top: 170px">
        <i class="icon icon-backtop"></i>
      </div>
    </div>
    <!-- 设置弹窗 -->
    <dialog-setting :visible.sync="dialogSettingVisable" :settingType="settingType" 
      @changeActive="changeSettingActive"></dialog-setting>
  </div>
</template>

<script>
import DataTable from './components/dataTable2'
import {Input, Select, Option, Radio, RadioGroup, RadioButton, Button} from 'element-ui'
  export default {
    components: {
      [Input.name]: Input,
      [Select.name]: Select,
      [Option.name]: Option,
      [Radio.name]: Radio,
      [RadioGroup.name]: RadioGroup,
      [RadioButton.name]: RadioButton,
      [Button.name]: Button,
      'm-dataTable': DataTable,
      'dialog-setting': () => import('./components/setting'), //设置弹窗
    },
    data () {
      return {
        searchForm: {
        },
        searchAdvancedVisable: false,
        settingType: '',
        dialogSettingVisable: false,
        dimension: '1',
        processActive: 1,
        rocketActive: false,
        isFixed: false
      }
    },
    created() {
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/post2') == 0){
          this.initSticky()
        }
      })
    },
    methods: {
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      },
      doSearch() {

      },
      backTop() {
        window.scroll(0,0)
      },
      doSetting(type) {
        this.settingType = type
        this.dialogSettingVisable = true
      },
      changeSettingActive(val) {
        this.settingType = val
      },
      //一支穿云箭
      onOven() {
        if(!this.rocketActive) {
          this.rocketActive = true
          setTimeout(() => {
            this.rocketActive = false
          }, 2000)
        }
      }
    }
  }
</script>

<style lang="scss">
  .process{
    padding: 0 10px;
    margin: 20px 0;
    height: 46px;
    background: #fbfbfd;
    .m-title{
      display: inline-block;
      line-height: 20px;
      padding: 0 13px;
      margin: 10px 0;
      border-left: 4px solid #0073dd;
    }
    .process-check-box{
      display: inline-block;
      margin: 5px;
      .item{
        display: inline-block;
        width: 80px;
        height: 30px;
        border-radius: 15px;
        margin-right: 10px;
        color: #919191;
        translate: all .2s ease;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
      }
      .item.active{
        background: #0073dd;
        color: #fff;
      }
    }
  }
  .oven-box{
    position: absolute;
    width: 160px;
    right: 0;
    .oven-button{
      width: 100%;
      height: 60px;
      position: relative;
      cursor: pointer;
      margin-bottom: 20px;
      .btn{
        position: absolute;
        width: 130px;
        height: 36px;
        right: 0;
        top: 12px;
        z-index: 2;
        background: #fff;
        border: 1px solid #e9e9e9;
        box-shadow: 0 0 6px rgba(0,0,0,.2);
        border-radius: 18px;
        line-height: 36px;
        text-align: center;
        text-indent: 15px;
        font-size: 14px;
        color: #5e5e5e;
      }
      .circle{
        width: 60px;
        height: 60px;
        background: #fcfcfc;
        position: absolute;
        box-shadow: 0 0 6px rgba(0,0,0,.2);
        border-radius: 30px;
        left: 0;
        top: 0;
        z-index: 3;
      }
    }
  }
  .icon-rocket{
    width: 60px;
    height: 60px;
    background: url('~@/assets/images/rocket.png') no-repeat center center;
    background-size: 64px 64px;
  }
  .icon-rocket.active {
    background: url('~@/assets/images/rocket.gif') no-repeat center center;
    background-size: 64px 64px;
  }
  .icon-chart{
    width: 60px;
    height: 60px;
    background: url('~@/assets/images/chart.png') no-repeat center center;
    background-size: 64px 64px;
  }
  .icon-chart.active{
    background: url('~@/assets/images/chart.gif') no-repeat center center;
    background-size: 64px 64px;
  }
</style>
